<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: 灰佳小白 1150248441@qq.com
 * @LastEditTime: 2022-09-19 19:25:55
-->
<template>
<div class="hospitalManage">
    <div style="float:left;display:flex">
        <el-input placeholder="请输入医院名" v-model="hosName" clearable style="margin-right: 10px" @clear="clear">
        </el-input>
        <el-button type="primary" @click="searchHos" style="margin-bottom: 10px">
            <i class="iconfont el-icon-search" /> 搜索</el-button>
    </div>
    <!-- 顶部新增按钮 -->
    <div  style="float:right">
        <el-button @click="toAddHos" type="success" round><i class="iconfont el-icon-circle-plus-outline" />新增</el-button>
    </div>
    <!-- 医院列表 -->
    <div class="hosList" style="margin-bottom:20px height:300px">
        <el-table :data="hosData" style="width: 100%">
            <!-- 序号 -->
            <el-table-column type="index" width="50" label="序号" align="center">
            </el-table-column>
            <!-- 医院名称 -->
            <el-table-column prop="name" label="医院名称" width="150" align="center">
            </el-table-column>
            <!-- 医院简介 -->
            <el-table-column prop="flags" label="医院简介" align="center">
            </el-table-column>
            <!-- 医院地址 -->
            <el-table-column prop="address" label="医院地址" align="center" width="150">
            </el-table-column>
            <!-- 标记 -->
            <el-table-column prop="introduce" label="标记" align="center" width="150">
            </el-table-column>
            <!-- 经度 -->
            <el-table-column prop="longitude" label="经度" align="center" width="150">
            </el-table-column>
            <!-- 纬度 -->
            <el-table-column prop="latitude" label="纬度" align="center" width="150">
            </el-table-column>
            <!-- 操作 -->
            <el-table-column fixed="right" label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button @click="toEdit(scope.row)" type="primary" size="small"> <i class="iconfont el-icon-edit" />修改</el-button>
                    <el-button type="danger" size="small" @click="toDelete(scope.row.id)"><i class="iconfont el-icon-delete"></i>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" v-if="dialogVisible" width="50%" :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="医院名称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="医院简介" prop="flags">
                <el-input type="textarea" v-model="form.flags"></el-input>
            </el-form-item>
            <el-form-item label="省市" prop="pca">
                <el-cascader v-model="form.pca" :props="{ label: 'name', value: 'name' }" :options="pca"></el-cascader>
            </el-form-item>
            <el-form-item label="医院地址" prop="address">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="标记" prop="introduce">
                <el-input v-model="form.introduce"></el-input>
            </el-form-item>
            <el-form-item label="经度" prop="longitude">
                <el-input v-model="form.longitude"></el-input>
            </el-form-item>
            <el-form-item label="纬度" prop="latitude">
                <el-input v-model="form.latitude"></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="updateHos">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 分页 -->

    <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[3, 5, 10, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
</div>
</template>

<script>
import {
    get,
    del,
    post
} from "@/utils/request";
import pca from "@/assets/pca.json";
export default {
    data() {
        return {
            dialogVisible: false,
            hosData: [],
            hosName:'',
            total: 1,
            page: 1,
            pageSize: 5,
            form: {},
            title: "",
            pca,
            rules: {
                //医院的表单验证
                name: [{
                    required: true,
                    message: "请输入医院名称",
                    trigger: "blur",
                }, ],
                address: [{
                    required: true,
                    message: "请输入医院地址",
                    trigger: "blur",
                }, ],
                longitude: [{
                    required: true,
                    message: "请输入医院经度",
                    trigger: "blur",
                }, ],
                latitude: [{
                    required: true,
                    message: "请输入医院纬度",
                    trigger: "blur",
                }, ],
                pca: [{
                    required: true,
                    message: "请选择医院所在地",
                    trigger: "change",
                }, ],
            },
        };
    },

    methods: {
        //关闭模态框的回调
        handleClose() {
            this.dialogVisible = false;
            this.form = {};
        },
        toAddHos() {
            this.dialogVisible = true;
            this.title = "添加医院信息";
        },
        toEdit(row) {
            this.dialogVisible = true;
            this.title = "修改医院信息";
            // console.log(row);
            row.pca = [row.province, row.city, row.area];
            console.log(row.pca);
            this.form = {
                ...row,
                pca: row.pca
            };
        },
        toDelete(id) {
            this.$confirm("此操作将永久删除该医院, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(async () => {
                    let res = await get("/hospital/deleteById", {
                        id,
                    });
                    // console.log(res);
                    if (res.status == 200) {
                        this.$message.success(res.message + " !");
                        this.getHosData();
                    } else {
                        this.$message.error("删除失败！");
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        //模态框确认的回调
        updateHos() {
            console.log(this.form.pca);
            let params = {
                ...this.form,
                province: this.form.pca[0],
                city: this.form.pca[1],
                area: this.form.pca[2],
            };
            this.$refs["form"].validate(async (valid) => {
                if (valid) {
                    let res = await post("/hospital/saveOrUpdate", params);
                    this.$notify({
                        title: "成功",
                        message: res.message,
                        type: "success",
                    });
                    this.dialogVisible = false;
                    this.getHosData();
                    this.form = {};
                } else {
                    this.$message.warning("带*输入框不能为空");
                    return false;
                }
            });
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getHosData();

            // console.log(`当前页: ${val}`);
        },
        handleSizeChange(val){
          this.pageSize=val;
          this.getHosData();
        },
        async getHosData() {
            let params = {
                page: this.page,
                pageSize: this.pageSize,
            };
            let res = await get("/hospital/pageQuery", params);
            // console.log(res.data.list);
            this.hosData = res.data.list;
            this.total = res.data.total;
        },
        async searchHos(){
          let params = {
                page: 1,
                pageSize: this.pageSize,
                name: this.hosName,
            };
            let res = await get("/hospital/pageQuery", params);
            // console.log(res.data.list);
            this.hosData = res.data.list;
            this.total = res.data.total;
        },
        clear(){
          this.searchHos();
        },
    },

    created() {
        this.getHosData();
    },
};
</script>

<style scoped>
</style>
